<template>
	<view class="wrap">
		<view>
			<view class="u-text-center my-20">
				<text class="text-xl ">我的代金券</text>
				<view class="text-sm">合计：{{count}}</view>
			</view>
			<view class="flex justify-between h-200 my-10"
				v-for="(voucher,index) in vouchers" :key="index">
				<yh-voucher :voucher="voucher" @update="update(voucher)"></yh-voucher>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				vouchers: [],
				count: 0
			}
		},
		async created() {
			this.load()
		},
		methods: {
			...mapActions('voucher', ['getMyVoucher']),
			async load() {
				const id = this.$store.state.user.user.id
				this.vouchers = await this.api.get(`user/${id}/voucher`)
				this.count = this.vouchers.reduce((acc, cur) => acc + cur.amount, 0)
			},
			update(voucher) {
				console.log(voucher.uuid)
				uni.navigateTo({
					url: `./qr?uuid=${voucher.uuid}`
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}
</style>
